<template>
<div class="container">
   <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>布置作业</el-breadcrumb-item>
          <el-breadcrumb-item>计划作业</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div @click="back" class="top-right">返回</div>
    </div>
  <div class="A-plan">
   
    <div class="plan-top-tab">
      <div class="left-tab">
        <!-- <el-page-header @back="goBack" content="模板布置"> </el-page-header> -->
        <!--          <div :class="checked ===2 ? 'checked':''" @click="cut(2)">AI运动处方</div>-->
      </div>
      <div class="right-tab">
        <el-select
          style="margin-right: 1vw"
          clearable
          size="small"
          v-model="checkedGrade"
          placeholder="请选择年级"
        >
          <el-option
            v-for="item in gradeSource"
            :key="item.scId"
            :label="item.scName"
            :value="item.scId"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          style="margin-right: 1vw"
          size="small"
          v-model="checkedSex"
          placeholder="请选择性别"
        >
          <el-option label="男" :value="1"> </el-option>
          <el-option label="女" :value="2"> </el-option>
        </el-select>
        <el-button size="small" @click="addTemplate" type="primary"
          >添加模板 <i class="el-icon-document-add"></i>
        </el-button>
      </div>
    </div>
    <div class="plan-main">
      <formboard :checkedSex="checkedSex" :checkedGrade="checkedGrade" />
      <!--      <exercise v-show=" checked === 2 " />-->
    </div>
  </div>
</div>
</template>

<script>
import formboard from "@/views/layoutHeader/plan/components/formboard";
import exercise from "@/views/sports/plan/components/exercise";
import encryption from "@/utils/encryption";
import Decrypt from "@/utils/Decrypt";
import { gradeList } from "@/api/conmmon";
export default {
  name: "Aplan",
  data() {
    return {
      activeName: "template",
      source: [],
      gradeSource: [],
      checkedSex: null,
      checkedGrade: null,
    };
  },
  components: {
    exercise,
    formboard,
  },
  created() {
    this.getgradeList();
  },
  methods: {
    back() {
      this.$router.push("/sportwork");
    },
    goBack() {
      this.$router.back();
    },
    cut(e) {
      this.checked = e;
    },
    addTemplate() {
      this.$router.push("/plan/planNewAdd");
    },
    getgradeList() {
      gradeList({ schoolId: this.$store.state.user.USER_INFO.pscShId }).then(
        (response) => {
          if (response.code === 200) {
            this.gradeSource = response.result;
          } else {
            this.$message.error(response);
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.container{
 padding: 2vh 15vw;

}
 .course-top {
    display: flex;
    justify-content: space-between;
    padding: 1vh 0;
    ::v-deep .el-breadcrumb__inner {
      font-size: 1vw;
    }
    .top-right {
      font-size: 1vw;
      color: #1677ff;
    }
  }
.A-plan {
  height: 85vh;
  background: #fff;
  padding: 2vh 2vw;
  .plan-top-tab {
    display: flex;
    justify-content: space-between;
    .left-tab {
      display: flex;
      div {
        padding: 1.5vw;
        &:first-child {
          margin-right: 7vw;
        }
        &:last-child {
        }
        &.checked {
          color: #409eff;
          border-bottom: .3vh solid #409eff;
        }
      }
    }
    .right-tab {
      padding-top: 1vh;
    }
  }
}
</style>
